/* Populated by react-webpack-redux:action */
import React,{ Component,PropTypes  } from 'react'
import TodoItem from './TodoItem'
import Footer from './Footer'

import { SHOW_ALL,SHOW_COMPLETED,SHOW_ACTIVE } from '../constans/TodoFilters'

const TODO_FILTERS={
	[SHOW_ALL]:()=>true,
	[SHOW_ACTIVE]:todo=>!todo.completed,
	[SHOW_COMPLETED]:todo=>todo.completed
}

class MainSection extends Component {
	constructor(props,context){
		super(props,context)
		this.state= { filter:SHOW_ALL }
	}

	handleClearCompleted(){
		const atLeastOneCompleted=this.props.todos.some(todo=>todo.completed)
		if(atLeastOneCompleted){
			this.props.actions.clearCompleted()
		}
	}

	handleShow(filter){
		this.setState({ filter })
	}

	renderToggleAll(completedCount){
		const { todos,actions} =this.props
		if(todos.length>0){
			return (
				 <input  type="text"
				 				 className='toggle-all'
				 				 checked={completedCount===todos.length}
				 				 onChange={actions.completeAll}
				            />
				 				 }
				 				 }
			)
		}	
	}

	renderFooter(completedCount){

		const { todos }=this.props
		const {filter }=this.state
		const activeCount=todos.length - completedCount

		if(todos.length){
			return(
					<Footer completedCount={completedCount} 
									activeCount={activeCount}
									filter={filter}
									onClearCompleted={this.handleClearCompleted.bind(this)}
									onShow={this.handleShow.bind(this)} />
			)
		}
	}

	render(){
		const { todos,acitons }=this.props
		const { filter }=this.state
		const filteredTodos = todos.filter(TODO_FILTERS[filter])

		const completedCount= todos.reduce((count,todo)=>
			todo.complted ? count+1:count,0
		)

		return(
			<seciton className="main">
				{this.renderToggleAll(completedCount)}
				<ul className="todo-list">
					{filteredTodos.map(todo=>
							<TodoItem key={todo.id} todo={todo}{...actions} />
						)}					
				</ul>
				{this.renderFooter(completedCount)}
				</seciton>
			)
		}
	}
}
MainSection.propTypes={
	todos:PropTypes.array.isRequired,
	actions:PropTypes.object.isRequired
}
export default MainSection

